<template>
  <div class="ui-tabs">
    <div class="slide">
      <ul class="swiper-wrapper">
        <li
          class="swiper-slide"
          v-for="(tab,idx) in tabs"
          :key="tab"
          :class="{'active': idx == onIndex}"
        >
          <a href="javascript:void(0)" @click="pick(tab,idx)">{{tab}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  name: "ui-tabs",
  props: ["list", "active"],
  data() {
    return {
      swiper: "",
      tabs: [],
      onIndex: 0
    };
  },
  mounted() {
    this.tabs = this.list;
    this.onIndex = this.active;
    let that = this;
    this.$nextTick(() => {
      setTimeout(() => {
        that.swiper = new Swiper(".ui-tabs>.slide", {
          initialSlide: that.onIndex,
          freeMode: false,
          slidesPerView: "auto",
          freeModeSticky: false
        });
        that.swiper.slideTo(that.onIndex, 1000, false);
      }, 1000);
    });
  },
  watch: {
    active(a, b) {
      this.onIndex = a;
      this.swiper.slideTo(a, 1000, false);
    }
  },
  methods: {
    pick(item, idx) {
      this.$emit("choose", idx);
      this.onIndex = idx;
    }
  }
};
</script>

<style lang="less" scoped>
.ui-tabs {
  position: relative;
  flex: 1;
  z-index: 2;
  display: flex;
  height: 87px;
  box-sizing: content-box;
  border-bottom: 1px solid #efefef;
  background-color: #2086f9;

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  .slide {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  ul {
    display: flex;
    li {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      min-width: 150px;
      flex-shrink: 0;
      a {
        font-size: 32px;
        color: #b5d8ff;
      }
      &.active a {
        color: #fff;
        font-weight: bold;

        &::before {
          content: "";
          position: absolute;
          bottom: 3px;
          left: 0;
          right: 0;
          margin: auto;
          width: 42px;
          height: 6px;
          border-radius: 3px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>
